<template>
	<div class="media-stream-container">
		<video autoplay id="local-stream"></video>
	</div>
</template>

<script>
export default {
	props: {
		openAudio: {
			type: Boolean,
			default: () => false
		},
		options: {
			type: Object,
			default: () => {}
		},
		markStatus: {
			type: Boolean,
			default: () => true
		}
	},
	data() {
		return {
			stream: null
		};
	},
	mounted() {
		this.getUserMedia()
			.then(stream => {
				if (stream) {
					this.$nextTick(() => {
						const videoBox = document.getElementById('local-stream');
						if (videoBox) {
							videoBox.srcObject = stream;
							videoBox.play();
						}
					});
				}
			})
			.catch(e => {
				console.log(e);
			});
	},
	methods: {
		async getUserMedia() {
			let constraints = {
				audio: this.openAudio,
				video: this.options || {
					width: { min: 1024, ideal: 1280, max: 1920 },
					height: { min: 576, ideal: 720, max: 1080 }
				}
			};
			let localStream = null;
			try {
				localStream = await navigator.mediaDevices.getUserMedia(constraints);
				return localStream;
			} catch (err) {
				return null;
			}
		},
		stopLocalStream() {
			const tracks = document.getElementById('local-stream').srcObject.getTracks();
			if (tracks.length !== 0) {
				tracks.forEach(track => {
					track.stop();
				});
			}
		}
	}
};
</script>

<style scoped>
#local-stream {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
</style>
